<template>
  <view class="game-container">
    <canvas 
      canvas-id="gameCanvas" 
      class="game-canvas"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      :will-read-frequently="true"
    ></canvas>
    <view class="ui-panel">
      <text class="player-name">{{currentPlayer}}</text>
      <text class="score">得分: {{score}}</text>
    </view>
  </view>
</template>

<script>
import GamePhysics from '../../common/game-physics.js';
import MarbleControl from '../../common/marble-control.js';
import TerrainGenerator from '../../common/terrain-generator.js';
import { requestAnimationFrame } from '../../common/animation-utils.js';

export default {
  data() {
    return {
      physics: null,
      marbleControl: null,
      terrainGenerator: null,
      canvasWidth: 375,
      canvasHeight: 667,
      currentPlayer: '玩家1',
      score: 0,
      ctx: null
    };
  },
  onLoad() {
    this.initGame();
    this.startGameLoop();
  },
  methods: {
    initGame() {
      // 初始化物理引擎
      this.physics = new GamePhysics();
      this.marbleControl = new MarbleControl(this.physics);
      this.terrainGenerator = new TerrainGenerator(this.physics);

      // 获取画布上下文
      this.ctx = uni.createCanvasContext('gameCanvas', this);

      // 生成地形
      this.terrainGenerator.generateTerrain(this.canvasWidth, this.canvasHeight);

      // 添加玩家弹珠
      this.playerMarble = this.physics.addMarble(
        this.canvasWidth / 2,
        this.canvasHeight / 2,
        15
      );
    },
    startGameLoop() {
      const render = () => {
        // 更新物理状态
        this.physics.update();

        // 清空画布
        this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);

        // 绘制地形和弹珠
        this.drawTerrain();
        this.drawMarbles();

        // 提交绘制
        this.ctx.draw();

        // 继续循环
        requestAnimationFrame(render);
      };
      render();
    },
    drawTerrain() {
      this.physics.terrain.forEach(terrain => {
        this.ctx.beginPath();
        this.ctx.moveTo(terrain[0].x, terrain[0].y);
        for (let i = 1; i < terrain.length; i++) {
          this.ctx.lineTo(terrain[i].x, terrain[i].y);
        }
        this.ctx.closePath();
        this.ctx.fillStyle = '#8BC34A';
        this.ctx.fill();
      });
    },
    drawMarbles() {
      this.physics.marbles.forEach(marble => {
        this.ctx.beginPath();
        this.ctx.arc(marble.x, marble.y, marble.radius, 0, Math.PI * 2);
        this.ctx.fillStyle = '#FF5722';
        this.ctx.fill();
        this.ctx.strokeStyle = '#E91E63';
        this.ctx.lineWidth = 2;
        this.ctx.stroke();
      });
    },
    
    // 触摸事件处理
    handleTouchStart(e) {
      const {x, y} = e.touches[0];
      this.marbleControl.selectMarble(this.playerMarble);
      this.marbleControl.dragUpdate(x, y);
    },
    handleTouchMove(e) {
      const {x, y} = e.touches[0];
      this.marbleControl.dragUpdate(x, y);
    },
    handleTouchEnd() {
      this.marbleControl.release();
    }
  }
};
</script>

<style>
.game-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.game-canvas {
  width: 100%;
  height: 100%;
}
.ui-panel {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(0,0,0,0.5);
  padding: 10px;
  border-radius: 5px;
  color: white;
}
</style>
